<template>
    <div style="padding: 15px;box-sizing: border-box;">
        <div style="display: flex;margin-bottom: 15px;">
            <!-- 日期选择器 -->

            <div class="block" style="margin-right: 20px;">
                <span class="demonstration">入离日期:</span>
                <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="至" start-placeholder="开始日期"
                    end-placeholder="结束日期" :shortcuts="shortcuts" :size="size" @change="blur" />
            </div>
            <!-- 搜索框 -->
            <div class="mt-4">
                <el-input v-model="input3" placeholder="请输入搜索内容" class="input-with-select" @blur="Sinput">
                    <template #prepend>
                        <el-select v-model="select" placeholder="搜索类型" style="width: 115px">
                            <el-option label="姓名" value="姓名" />
                            <el-option label="手机号" value="手机号" />
                            <el-option label="房号" value="房号" />
                        </el-select>
                    </template>
                    <template #append>
                        <el-button @click="searchfn">查询</el-button>
                    </template>
                </el-input>
            </div>

            <!-- 导出按钮 -->
            <el-button @click="exportToExcel" style="margin-left: 250px;">导出勾选项</el-button>
        </div>

        <!-- 表格部分 -->

        <el-table :data="listDate" @selection-change="change3"  style="width: 100%" border :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection" ref="table"  />
            <el-table-column prop="roomType" label="房型名称"  />
            <el-table-column prop="roomId" label="房号" />
            <el-table-column prop="name" label="房客名字" />
            <el-table-column prop="phone" label="房客电话" />
            <el-table-column prop="reachTime" label="抵店时间"  />
            <el-table-column prop="leaveTime" label="离店时间" />

        </el-table>

        <!-- 分页部分 -->
        <div class="fenye">
            <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4"
                :page-sizes="[100, 200, 300, 400]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
    </div>
</template>
  
<script lang="ts" setup>
import axios from '../WuJiUtils/http';
import * as XLSX from 'xlsx';
import { reactive, ref } from 'vue'
let checkdata:any=reactive([])
const change3=(e:any)=>{
    checkdata=e
    console.log(checkdata);
}
const size = ref<'default' | 'large' | 'small'>('default')
let total=1 //总条数
const listDate:any= ref([]) //渲染数据
const value2 = ref('') //日期
let select=ref('') //下拉框的值
const input3 = ref('') //输入框的值
let name=ref('') //名字
let phone=ref(0) //手机号
let roomId=ref(0) //房号
let currentPage4 = 1 //页码
let pageSize4 = 5 //每页条数
let startTime=ref('')//开始日期
let deadTime=ref('')//结束日期

const blur = (value: any) => {
    value.forEach((i,index,value) => {
        let date=new Date(i)
    let y =date.getFullYear()
    let m=date.getMonth()+1
    if(m<10){
        m='0'+m
    }
    let d=date.getDate()
    if(d<10){
        d='0'+d
    }
    i=y+'-'+m+'-'+d
    value[index]=i
    });
    
    // console.log(value);
    startTime.value=Object.values(value)[0]+''
    deadTime.value=Object.values(value)[1]+''
    // console.log(startTime.value,deadTime.value);
    // console.log(value2.value);
    render()
    
}
const searchfn=()=>{
    if(select.value==='姓名'){
        name.value=input3.value
    }else if(select.value==='手机号'){
        phone.value=Number(input3.value)
    }else{
        roomId.value=Number(input3.value)
    }
    render()
}


const shortcuts = [
    {
        text: 'Last week',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
        },
    },
    {
        text: 'Last month',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
        },
    },
    {
        text: 'Last 3 months',
        value: () => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
        },
    },
]





const handleSizeChange = (e:number) => {
    console.log(e);
    pageSize4=e
    render()
    
}
const handleCurrentChange = (e:number) => {
    console.log(e);
    currentPage4=e
    render()
}


function render() {
    axios({
        url: '/orderRoom/findOrderRecords',
        method: "post",
        data: { page: currentPage4, limit: pageSize4,deadTime:deadTime.value,name:name.value,phone:phone.value,startTime:startTime.value,roomId:roomId.value }
    }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
            // console.log(res.data.data);
            // let $listDate=JSON.parse(JSON.stringify(listDate))
            // $listDate=res.data.data
            total=res.data.count
            listDate.value=res.data.data
            // console.log(1,listDate);

        }
    })
}
onMounted(() => {
    render()
    // console.log(9,listDate)
})
const { proxy } =getCurrentInstance()
function exportToExcel() {
    // 创建一个工作簿对象
    let workbook = XLSX.utils.book_new();
    
    // 创建一个工作表对象
    if(checkdata==false){proxy.$message.error('请先勾选');return}
    let worksheet = XLSX.utils.json_to_sheet(checkdata);
    
    // 将工作表添加到工作簿中
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    
    // 将工作簿保存为Excel文件
    XLSX.writeFile(workbook, '住宿记录.xlsx');
    setTimeout(()=>{
        proxy.$message.success('以成功导出为Excel表格')
    },1500)
  }

</script>
  
<style scoped>
.demo-date-picker {
    display: flex;
    width: 100%;
    padding: 0;
    flex-wrap: wrap;
}

.demo-date-picker .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    flex: 1;
}

.demo-date-picker .block:last-child {
    border-right: none;
}

.demo-date-picker .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.fenye {
    margin-top: 15px;
    display: flex;
    justify-content: center;
}
</style>
  